<template>
    <div class="question-difficulty">
        <el-row :gutter="20" class="filter-row" align="middle">
            <el-col :span="4">
                <el-button type="primary" :icon="Plus" class="add-button" @click="showDialog = true">添加</el-button>
            </el-col>

            <el-col :span="4">
                <el-select v-model="selectedCategory1" placeholder="题目类别1">
                    <el-option
                        v-for="item in categoryOptions1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="selectedCategory2" placeholder="题目类别2">
                    <el-option
                        v-for="item in categoryOptions2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            
            <el-col :span="4">
                <el-input v-model="searchText" placeholder="输入关键字"></el-input>
            </el-col>

            <el-col :span="4"></el-col>
            <el-col :span="4" class="search-button-container">
                <el-button type="primary" :icon="Search" class="search-button">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%; margin-top: 20px;" :height="tableHeight" :row-class-name="tableRowClassName">
            <el-table-column prop="id" label="序号" width="80"></el-table-column>
            <el-table-column prop="difficultyName" label="难度名称"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    <el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <div class="action-buttons">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.length"
            style="margin-top: 20px; text-align: right;">
        </el-pagination>
        <el-dialog title="新增题目难度" v-model="showDialog">
            <el-form :model="form" label-width="100px">
                <el-form-item label="难度名称">
                    <el-input v-model="form.difficultyName"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.description"></el-input>
                </el-form-item> <!-- 修复了这里的闭合标签 -->
                <el-form-item label="状态">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option label="启用" value="启用"></el-option>
                        <el-option label="停用" value="停用"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDialog = false">取消</el-button>
                    <el-button type="primary" @click="handleAdd">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Plus, Search } from '@element-plus/icons-vue';
const tableData = ref([
    { id: '01', difficultyName: '简单', description: '适合初学者', status: '启用', createdTime: '2021-08-25 14:40' },
    { id: '02', difficultyName: '中等', description: '适合有一定基础的学生', status: '启用', createdTime: '2021-08-25 14:40' },
    { id: '03', difficultyName: '困难', description: '适合高级学生', status: '停用', createdTime: '2021-08-25 14:40' },
    { id: '04', difficultyName: '简单', description: '适合初学者', status: '启用', createdTime: '2021-08-25 14:40' },
    { id: '05', difficultyName: '中等', description: '适合有一定基础的学生', status: '启用', createdTime: '2021-08-25 14:40' },
    { id: '06', difficultyName: '困难', description: '适合高级学生', status: '停用', createdTime: '2021-08-25 14:40' },
    { id: '07', difficultyName: '简单', description: '适合初学者', status: '启用', createdTime: '2021-08-25 14:40' },
    { id: '08', difficultyName: '中等', description: '适合有一定基础的学生', status: '启用', createdTime: '2021-08-25 14:40' },
    { id: '09', difficultyName: '困难', description: '适合高级学生', status: '停用', createdTime: '2021-08-25 14:40' },
    { id: '10', difficultyName: '简单', description: '适合初学者', status: '启用', createdTime: '2021-08-25 14:40' },
    { id: '11', difficultyName: '中等', description: '适合有一定基础的学生', status: '启用', createdTime: '2021-08-25 14:40' },
    { id: '12', difficultyName: '困难', description: '适合高级学生', status: '停用', createdTime: '2021-08-25 14:40' }
]);

const selectedCategory = ref('');
const selectedDifficulty = ref('');
const searchQuery = ref('');
const showDialog = ref(false);
const form = ref({
    difficultyName: '',
    description: '',
    status: ''
});

const tableHeight = ref('400px'); // 表格高度保持一致

const handleEdit = (row) => {
    console.log('编辑', row);
};

const handleDelete = (row) => {
    console.log('删除', row);
};

const handleSearch = () => {
    console.log('搜索', searchQuery.value);
};

const handleAdd = () => {
    tableData.value.push({
        id: (tableData.value.length + 1).toString().padStart(2, '0'),
        difficultyName: form.value.difficultyName,
        description: form.value.description,
        status: form.value.status,
        createdTime: new Date().toISOString().slice(0, 19).replace('T', ' ')
    });
    showDialog.value = false;
    form.value.difficultyName = '';
    form.value.description = '';
    form.value.status = '';
};

const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
};

onMounted(() => {
    tableHeight.value = `${window.innerHeight - 300}px`; // 表格高度保持一致
    window.addEventListener('resize', () => {
        tableHeight.value = `${window.innerHeight - 300}px`; // 表格高度保持一致
    });
});
</script>

<style scoped>
.question-difficulty {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}

.toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.el-button {
    
    display: flex;
    align-items: center;
    justify-content: center;
}



.search-input {
    margin-right: 10px;
    width: 100%;
}

.action-buttons {
    display: flex;
    align-items: center;
}

.action-buttons .el-button {
    margin-right: 5px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
}

::v-deep .even-row{
    background-color: #e6f7e6 !important; /* 浅绿色 */
}

::v-deep .odd-row{
    background-color: #fff9e6 !important; /* 浅黄色 */
}

.search-button-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 修改为居右 */
}

</style>
